<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="../js/17.0.1/react.development.js"></script>
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <script src="../js/17.0.1/prop-types.js"></script>
  <script src="../js/17.0.1/babel.min.js"></script>
  <script type="text/babel">
    /*
      1 React/Vue中的可以拥有什么作用（key的内部原理）
      2 为什么遍历列表时，key最好不要用index?

      1.虚拟DOM中的可以的作用：
        1) 简单来说 可以是虚拟的DOM对象的标识，在更新显示时，key起着极其中重要的作用
        2) 详细来说 当状态中的数据发生变化是，react会根据新数据生成 新的虚拟DOM，随后react进行新的虚拟DOM 与 旧的虚拟DOM的 diff比较 规则如下：
          a 旧虚拟DOM中找到了新虚拟DOM相同的 key
            1 若虚拟DOM中内容没有变，直接使用之前的真实DOM
            2 若虚拟DOM中的内容变量，则生成新的真实的DOM，随后替换掉页面之前的真实的DOM
          b 旧的虚拟DOM中未找到云新的虚拟DOM相同的key
            根据数据创建新的真实DOM，随后渲染到页面
      2. 用index做为可以可能会引发的问题
        1 若对数据进行 逆序添加，逆序删除等破坏顺序操作
          会参数没有必要的 真实DOM更新 == 界面没有问题 但是效率低
        2 如果结构中还包括输入类的DOM
          会参数错误的DOM更新  == 界面有问题
        3 注意，如果不存在对数据的逆序添加、逆序删除等操作
          仅仅用于渲染列表展示，使用index作为key是没有问题的

      3. 开发中如何选择key
        1 最好使用每条数据中唯一标识作为key，id手机号，身份证等
        2 如果确定知识简单的数据展示，用index也是可以的
    */
    class Person extends React.Component{
      state = {
        persons:[
          {id:1,name:'张三',age:18},
          {id:2,name:'李四',age:29}
        ]
      }
      add = ()=>{
        const { persons } = this.state;
        const p = {id:persons.length + 1,name:'王五',age:62}
        this.setState({
          persons:[p,...persons]
        })
      }
      render() {
        return (
          <div>
            <h2>Person 组件</h2>
            <button onClick={this.add}>添加人员</button>
            <ul>
              {this.state.persons.map((item,index)=>{
                return(
                  <li key={index}>{item.id} -- {item.name} -- {item.age}</li>
                )
              })}
            </ul>
          </div>
        )
      }
    }

    ReactDOM.render(<Person/>,document.getElementById("app"))
  </script>
</body>
</html>